<template>
  <div>
    <mainFrame>
      <div slot='content'>
        <div class="top-title">
          {{ id ? '台区编辑' : '添加台区' }}
        </div>
        <div style="margin: 10px 0;">
          <el-button type="primary" @click="back" icon="el-icon-back">返回</el-button>
        </div>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">归属地</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">台区号</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">台区地点</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">信道</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">GPRS</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">最后通讯时间</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <span v-if="userRole!=0">{{ item.location }}</span>
              <div v-else>
                <el-input v-model="item.location" placeholder="请输入内容" size="small"></el-input>
                <el-button type="primary" @click="onSubmitSingle('location')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <span v-if="userRole!=0">{{ item.areaNo }}</span>
              <div v-else>
                <el-input v-model="item.areaNo" placeholder="请输入内容" size="small"></el-input>
                <el-button type="primary" @click="onSubmitSingle('areaNo')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.address" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('address')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.channel" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('channel')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-radio-group v-model="item.GPRS" style="margin-right: 10px;">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">无</el-radio>
              </el-radio-group>
              <el-button type="primary" @click="onSubmitSingle('GPRS')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <div v-if="!item.id">
                <el-date-picker v-model="item.lassUpdateTime" type="datetime" placeholder="选择日期时间" size="small" disabled>
              </el-date-picker>
              </div>
              <div v-else>{{ item.lassUpdateTime }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="4">
            <div class="grid-content bg-purple">日召时间</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">召测时间</div>
          </el-col> -->
          <el-col :span="4">
            <div class="grid-content bg-purple">运行模式</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">平衡模式</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">变压器容量</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">负载率限值</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">不平衡度限值</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">零线电流限值</div>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-date-picker v-model="item.callDate" type="date" placeholder="选择日期" size="small">
              </el-date-picker>
              <el-button type="primary" @click="onSubmitSingle('callDate')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-date-picker v-model="item.callTime" type="datetime" placeholder="选择日期时间" size="small">
              </el-date-picker>
              <el-button type="primary" @click="onSubmitSingle('callTime')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col> -->
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-radio-group v-model="item.mode" style="margin-right: 10px;">
                <el-radio :label="1">自动</el-radio>
                <el-radio :label="0">手动</el-radio>
              </el-radio-group>
              <el-button type="primary" @click="onSubmitSingle('mode')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-radio-group v-model="item.balanceMode" style="margin-right: 10px;">
                <el-radio :label="0">电流</el-radio>
                <el-radio :label="1">视在功率</el-radio>
                <el-radio :label="2">智能平衡</el-radio>
              </el-radio-group>
              <el-button type="primary" @click="onSubmitSingle('balanceMode')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.transformerCapacity" placeholder="请输入内容" size="small"></el-input>KVA
              <el-button type="primary" @click="onSubmitSingle('transformerCapacity')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.loadRateLimit" placeholder="请输入内容" size="small"></el-input>%
              <el-button type="primary" @click="onSubmitSingle('loadRateLimit')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.imbalancesLimit" placeholder="请输入内容" size="small"></el-input>%
              <el-button type="primary" @click="onSubmitSingle('imbalancesLimit')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.neutralWireLimit" placeholder="请输入内容" size="small"></el-input>A
              <el-button type="primary" @click="onSubmitSingle('neutralWireLimit')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">指令阈值</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器一端口</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器一IP</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器一APN</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器二端口</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器二IP</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.cmdValue" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('cmdValue')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.server1Port" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('server1Port')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.server1IP" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('server1IP')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.server1APN" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('server1APN')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.server2Port" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('server2Port')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.server2IP" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('server2IP')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">服务器二APN</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">CT1</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">CT2</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">CCID</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.server2APN" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('server2APN')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.CT1" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('CT1')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-input v-model="item.CT2" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('CT2')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <div v-if="!item.id">
                <el-input v-model="item.CCID" placeholder="请输入内容" size="small"></el-input>
              <el-button type="primary" @click="onSubmitSingle('CCID')" icon="el-icon-check" size="mini" v-if="item.id"></el-button>
              </div>
              <div v-else>{{ item.CCID }}</div>
            </div>
          </el-col>
        </el-row>
        <div style="margin: 10px 0;">
          <el-button type="primary" @click="onSubmit" icon="el-icon-check">保存</el-button>
        </div>
      </div>
    </mainFrame>
  </div>
</template>
<script>
import mainFrame from '@/components/mainFrame'
import utils from '../ttJs/utils.js'
export default {
  components: {
    mainFrame
  },
  data() {
    return {
      item: [],
      id: null,
      userRole: null
    };
  },
  mounted: function() {
    this.userRole = sessionStorage.getItem("role");
    this.id = this.$route.query.id;
    this.getInfo();
  },

  methods: {
    getInfo() {
      var self = this;
      if (utils.validateData(self.$route.query.id)) {
        var id = self.$route.query.id;
        var url = '/yitai/admin/areaInfo';
        var params = { id: id }
        var success = function(response) {
          self.item = response.info;
        }
        var fail = function() {
          utils.fail('加载失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
    },
    onSubmit() {
      var self = this;
      if (!utils.validateData(self.item.location)) {
        self.$message({message:'归属地不能为空！'});
        return;
      }
      /*if (!utils.validateData(self.item.areaNo)) {
        self.$message({message:'台区号不能为空！'});
        return;
      }*/
      /*if (!utils.validateData(self.item.address)) {
        self.$message({message:'台区地点不能为空！'});
        return;
      }*/

      var url = '/yitai/admin/updateArea';
      var params = { id: self.$route.query.id };
      params['location'] = self.item.location;
      params['areaNo'] = self.item.areaNo;
      params['address'] = self.item.address;
      params['status'] = self.item.status;
      params['user'] = self.item.user;
      params['IP'] = self.item.IP;
      params['channel'] = self.item.channel;
      params['GPRS'] = self.item.GPRS;
      params['lassUpdateTime'] = self.item.lassUpdateTime;
      params['callDate'] = self.item.callDate;
      params['callTime'] = self.item.callTime;
      params['mode'] = self.item.mode;
      params['balanceMode'] = self.item.balanceMode;
      params['transformerCapacity'] = self.item.transformerCapacity;
      params['loadRateLimit'] = self.item.loadRateLimit;
      params['imbalancesLimit'] = self.item.imbalancesLimit;
      params['neutralWireLimit'] = self.item.neutralWireLimit;
      params['cmdValue'] = self.item.cmdValue;
      params['server1Port'] = self.item.server1Port;
      params['server1IP'] = self.item.server1IP;
      params['server1APN'] = self.item.server1APN;
      params['server2Port'] = self.item.server2Port;
      params['server2IP'] = self.item.server2IP;
      params['server2APN'] = self.item.server2APN;
      params['CT1'] = self.item.CT1;
      params['CT2'] = self.item.CT2;
      params['CCID'] = self.item.CCID;
      var success = function(response) {
        //self.addMachineForArea();
        self.$message({
          message: '保存成功',
          type: 'success'
        });
        window.history.back();
      };
      var fail = function() {
        self.$message({message:'保存失败'});
      };
      var complete = function() {};
      utils.requestLoading(url, params, success, fail, complete);
    },
    onSubmitSingle(name) {
      var self = this;
      if (name == 'location' && !utils.validateData(self.item.location)) {
        self.$message({message:'归属地不能为空！'});
        return;
      }
      /*if (name == 'areaNo' && !utils.validateData(self.item.areaNo)) {
        self.$message({message:'台区号不能为空！'});
        return;
      }*/
      /*if (name == 'address' && !utils.validateData(self.item.address)) {
        self.$message({message:'台区地点不能为空！'});
        return;
      }*/
      var url = '/yitai/admin/updateAreaSingle';
      var params = { id: self.$route.query.id };
      params[name] = self.item[name];
      var success = function(response) {
        self.$message({
          message: '保存成功',
          type: 'success'
        });
      };
      var fail = function() {
        self.$message({message:'保存失败'});
      };
      var complete = function() {};
      utils.requestLoading(url, params, success, fail, complete);
    },
    back() {
      window.history.back();
    }
  },
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.page {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.top-title {
  font-size: 18px;
  font-weight: bold;
  padding: 0 20px;
  margin-bottom: 10px;
}

.bg-purple {
  background: #d3dce6;
  font-weight: bold;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  min-height: 45px;
  padding: 5px;
}

.el-radio+.el-radio {
  margin-left: 0;
}

.el-radio {
  margin-right: 10px;
}

.el-input, .el-date-picker {
  width: 65%;
}

</style>
